(function ($, player) {
    function MusicPlayer(dom) {
        this.wrap = dom;  //播放器的容器（用于加载ListControl模块）
        this.dataList = []; //存储请求到的数据

        
        this.indexObj = null; //索引
        this.rotateTimer = null;  //旋转唱片暂停的状态
        this.curIndex = 0;
        this.list = null;  //列表切歌对象（在thisPlay里赋值）

        this.progress = player.progress.pro();   //实例化一个进度条的组件
    }
    MusicPlayer.prototype = {
        init() { //初始化
            this.getDom(); //获取元素
            this.getData('../mock/data.json');  //请求数据
        },
        getDom() { //获取页面里的元素
            this.record = document.querySelector(".songImg img"); //旋转图片
            this.controlBtns = document.querySelectorAll(".control li");  //底部导航里的按钮
            this.musicControl();  //添加音乐操作功能
        },
        getData(url) {
            $.ajax({
                url: url,
                methed: "get",
                success:  (data) => {
                    this.dataList = data; //存储请求过来的数据

                    this.listPlay();  //列表切歌，它要放在loadMusic的前面，因为this.list对象是在这个方法里声明的，要在loadMusic里使用

                    this.indexObj = new player.controlIndex(data.length);  //给索引值对象赋值
                    this.loadMusic(this.indexObj.index);  //加载音乐
                    this.dragProgrss();  //添加进度条功能
                },
                error: function () {
                    console.log('数据请求失败');
                }
            })
        },
        loadMusic(index) { //加载音乐
            player.render(this.dataList[index]);  //渲染图片，歌曲信息
            player.music.load(this.dataList[index].audioSrc);

            this.progress.renderAllTime(this.dataList[index].duration);  //加载歌曲的总时间
            //播放音乐
            if(player.music.status === "play") {
                player.music.play();
                this.controlBtns[2].className = 'playing'; //改变播放按钮的状态
                this.imgRotate(0);  //旋转图片

                this.progress.move(0);   //切歌的时候需要让进度条走
            }

            //改变列表歌曲的选中状态
            this.list.changeSelect(index);

            this.curIndex = index; //存储当前歌曲的索引


            //歌曲播放到头了要切歌
            player.music.end( () => {
                this.loadMusic(this.indexObj.next());
            })
        },
        musicControl() {  //控制音乐
            //上一首
            this.controlBtns[1].addEventListener("touchend", () => {
                player.music.status = "play";
                this.loadMusic(this.indexObj.prev());

            })

            //播放、暂停
            this.controlBtns[2].addEventListener("touchend", () => {
                if(player.music.status === "play") {   //歌曲的状态为播放，点击后药暂停
                    player.music.pause();  //歌曲暂停
                    this.controlBtns[2].className = '';  //按钮变成暂停状态
                    this.imgStop(); //停止旋转图片
                    this.progress.stop();//进度条停止
                } else { //歌曲的状态为暂停，点击后要播放
                    player.music.play();  //歌曲播放
                    this.controlBtns[2].className = 'playing';   //按钮变成播放状态

                    //第二次播放的时候需要加上上一次旋转的角度
                    const deg = this.record.dataset.rotate || 0;
                    this.imgRotate(deg);  //旋转图片

                    this.progress.move(); //进度条开始
                }
            })

            //下一首
            this.controlBtns[3].addEventListener("touchend", () => {
                this.loadMusic(this.indexObj.next());
            })
        }, 
        imgRotate(deg) { //旋转唱片
            clearInterval(this.rotateTimer);
            this.rotateTimer = setInterval(() => {
                deg = +deg + 0.2; //前面的加号是把字符串转成数字

                this.record.style.transform = `rotate(${deg}deg)`;
                this.record.dataset.rotate = deg; //把旋转的角度存到标签身上，为了暂停后继续播放能取到

            }, 1000 / 60);
        },
        imgStop() { // 停止图片旋转
            clearInterval(this.rotateTimer);
        },
        listPlay() {  //列表切歌
            this.list = player.listControl(this.dataList, this.wrap); //把listControl对象赋值this.list

            //列表按钮添加点击事件
            this.controlBtns[4].addEventListener('touchend', () => {
                this.list.slideUp();
            });

            //歌曲列表添加事件
            this.list.musicList.forEach((item, index) => {
                item.addEventListener('touchend', () => {
                    //如果点击是当前的那首歌，不管是暂停还是播放都无效
                    if(this.curIndex === index) {
                        return
                    }

                    player.music.status = "play";  //歌曲要变成播放状态
                    this.loadMusic(index);
                    this.list.slideDown();
                })
            })
        },
   
        dragProgrss() {
            const circle = player.progress.drag(document.querySelector('.circle'));
            
            //按下圆点
            circle.init();
            circle.start = () => {
                this.progress.stop()  //按下原点进度条停止
            }
            //拖拽原点
            circle.move = (per) => {
                this.progress.update(per);
            };

            //抬起原点
            circle.end = (per) => {
                const cutTime = per * this.dataList[this.indexObj.index].duration;  //当前拖拽到的时间点

                player.music.playTo(cutTime);
                player.music.play();

                this.progress.move(per);  //进度条动

                const deg = this.record.dataset.rotate || 0;
                this.imgRotate(deg);  //旋转图片

                this.controlBtns[2].className = 'playing';

                //拖拽到最后一秒的时候要进行切歌
                //f(cutTime == this.dataList[this.indexObj.index].duration) {
                //   console.log(cutTime)
                //   player.music.status = "play";
                //   this.loadMusic(this.indexObj.next());
                //
            }
        }
    }
   const musicPlayer = new MusicPlayer(document.getElementById('wrap'));
   musicPlayer.init();

})(window.Zepto, window.player);